<div class=" animated fadeInRight ecommerce">
    <div class="flex justify-start">
        <div class="col-md-1 padding-r-0">
            <vc:create path="community/selectCommunityFloor"></vc:create>
        </div>
        <div class="col-md-11">

            <div class="ibox ">
                <div class="ibox-title">
                    <h5>
                        <vc:i18n name="查询条件" namespace="reportFeeSummary"></vc:i18n>
                    </h5>
                    <div class="ibox-tools" style="top:10px;">

                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-2">
                            <div class="form-group input-group">
                                <input type="text" :placeholder="vc.i18n('请选择开始日期','reportFeeSummary')"
                                    v-model="reportFeeSummaryInfo.conditions.startDate" class=" form-control startDate">
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="form-group input-group">
                                <input type="text" :placeholder="vc.i18n('请选择结束日期','reportFeeSummary')"
                                    v-model="reportFeeSummaryInfo.conditions.endDate" class=" form-control endDate">
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="form-group">
                                <input type="text" :placeholder="vc.i18n('请填写房屋编号','reportFeeSummary')"
                                    class="form-control form-control-md"
                                    v-model.trim="reportFeeSummaryInfo.conditions.objName">
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="form-group input-group">
                                <input type="text" :placeholder="vc.i18n('请填写业主名称','reportFeeSummary')"
                                    v-model.trim="reportFeeSummaryInfo.conditions.ownerName" class=" form-control">
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="form-group">
                                <input type="text" :placeholder="vc.i18n('请填写业主手机号','reportFeeSummary')"
                                    class="form-control form-control-md"
                                    v-model.trim="reportFeeSummaryInfo.conditions.link">
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <button type="button" class="btn btn-primary btn-md" v-on:click="_queryMethod()">
                                <i class="fa fa-search"></i>
                                <vc:i18n name="查询" namespace="reportFeeSummary"></vc:i18n>
                            </button>
                            <button type="button" class="btn btn-primary btn-md" v-on:click="_resetMethod()">
                                <i class="fa fa-repeat"></i>
                                <vc:i18n name="重置" namespace="reportFeeSummary"></vc:i18n>
                            </button>
                        </div>
                    </div>
                    <div class="row margin-bottom">
                        <div class="col-sm-2">
                            <select class="form-control-md form-control input-s-sm inline"
                                v-model="reportFeeSummaryInfo.conditions.feeTypeCd">
                                <option selected value="">{{vc.i18n('请选择费用大类','reportFeeSummary')}}</option>
                                <option v-for="(item,index) in reportFeeSummaryInfo.feeTypeCds" :key="index"
                                    v-bind:value="item.statusCd">
                                    {{item.name}}
                                </option>
                            </select>
                        </div>
                        <div class="col-sm-2" v-if="reportFeeSummaryInfo.communitys.length>1">
                            <select class="form-control-md form-control input-s-sm inline"
                                v-model="reportFeeSummaryInfo.conditions.communityId" @change="_changCommunity()">
                                <option disabled selected value="">
                                    {{vc.i18n('请选择小区','reportFeeSummary')}}
                                </option>
                                <option v-for="(item,index) in reportFeeSummaryInfo.communitys" :key="index"
                                    v-bind:value="item.communityId">
                                    {{item.name}}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="row " v-show="reportFeeSummaryInfo.moreCondition == true">
                        <div class="col-sm-12 ">
                            <div class="form-group ">
                                <span class="margin-right" v-for="(item,index) in reportFeeSummaryInfo.feeConfigs">
                                    <input type="checkbox" class="i-checks checkItem" v-bind:value="item.configId"
                                        v-model="reportFeeSummaryInfo.configIds">
                                    {{item.feeName}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ibox">
                <div class="ibox-title">
                    <h5>
                        <vc:i18n name="费用汇总表" namespace="reportFeeSummary"></vc:i18n>
                    </h5>
                    <span class="fa fa-info-circle popover-show" style="cursor: pointer;"
                        data-content="以月份为维度，进行费用情况汇总"></span>
                    <span style="font-size: 10px;">(按天更新)</span>
                    <div class="ibox-tools" style="top:10px;">
                        <button type="button" class="btn btn-primary btn-sm" v-on:click="_exportExcel()">
                            <i class="fa fa-plus"></i>
                            <span>
                                <vc:i18n name="导出" namespace="reportFeeSummary"></vc:i18n>
                            </span>
                        </button>
                        <!-- <button type="button" class="btn btn-white btn-sm" v-on:click="_printFeeSummary()">
                                    <vc:i18n name="打印" namespace="reportFeeSummary"></vc:i18n>
                                </button> -->
                    </div>
                </div>
                <div class="ibox-content">
                    <table class="table table-bordered" data-page-size="15">
                        <thead>
                            <tr>
                                <th class="text-center">
                                    <vc:i18n name="总户数" namespace="reportFeeSummary"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="收费户" namespace="reportFeeSummary"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="欠费户" namespace="reportFeeSummary"></vc:i18n>
                                </th>
                                <th class="text-center" colspan="3">
                                    <vc:i18n name="历史欠费+当期欠费=欠费" namespace="reportFeeSummary"></vc:i18n>
                                </th>
                                <th class="text-center" colspan="4">
                                    <vc:i18n name="欠费追回+当期部分+预交=实缴" namespace="reportFeeSummary"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="当期应收" namespace="reportFeeSummary"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="当期实收" namespace="reportFeeSummary"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="已交户/收费户=户收费率" namespace="reportFeeSummary"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="当期实收/当期应收=收费率" namespace="reportFeeSummary"></vc:i18n>
                                </th>
                                <th class="text-center">
                                    <vc:i18n name="欠费追回/(欠费追回+历史欠费)=清缴率" namespace="reportFeeSummary"></vc:i18n>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="fee in reportFeeSummaryInfo.fees">
                                <td class="text-center">{{fee.roomCount}}</td>
                                <td class="text-center">{{fee.feeRoomCount}}</td>
                                <td class="text-center">{{fee.oweRoomCount}}</td>
                                <td class="text-center">{{fee.hisOweFee}}</td>
                                <td class="text-center">{{fee.curOweFee}}</td>
                                <td class="text-center">{{(fee.curOweFee+fee.hisOweFee).toFixed(2)}}</td>
                                <td class="text-center">{{fee.hisReceivedFee}}</td>
                                <td class="text-center">
                                    {{(fee.receivedFee-fee.hisReceivedFee-fee.preReceivedFee).toFixed(2)}}
                                </td>
                                <td class="text-center">{{fee.preReceivedFee}}</td>
                                <td class="text-center">
                                    {{fee.receivedFee}}
                                </td>
                                <td class="text-center">
                                    {{fee.curReceivableFee}}
                                </td>
                                <td class="text-center">
                                    {{(fee.curReceivableFee-fee.curOweFee).toFixed(2)}}
                                </td>
                                <td class="text-center" v-if="fee.feeRoomCount>0">
                                    {{((fee.feeRoomCount-fee.oweRoomCount)/fee.feeRoomCount*100).toFixed(2)}}%
                                </td>
                                <td class="text-center" v-else>
                                    0%
                                </td>
                                <td class="text-center" v-if="(fee.curReceivableFee)>0">
                                    {{((fee.curReceivableFee-fee.curOweFee)/(fee.curReceivableFee)*100).toFixed(2)}}%
                                </td>
                                <td class="text-center" v-else>
                                    0%
                                </td>
                                <td class="text-center" v-if="(fee.hisReceivedFee+fee.hisOweFee)>0">
                                    {{((fee.hisReceivedFee)/(fee.hisReceivedFee+fee.hisOweFee)*100).toFixed(2)}}%
                                </td>
                                <td class="text-center" v-else>
                                    0%
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <div class="margin-top bg-white padding-top padding-left">
                <vc:create path="report/floorFeeSummary"></vc:create>
            </div>
            <div class="margin-top bg-white padding-top padding-left">
                <vc:create path="report/configFeeSummary"></vc:create>
            </div>
        </div>
    </div>
</div>